﻿<!DOCTYPE html>
<html ng-app="demoApp" lang="en">
<head>
    <title id='Description'>AngularJS Calendar provides support for localizing its content and
        dates for different languages and date formats. Each localization is contained within
        its own file with the language code appended to the name, e.g. AngularJS.glob.de-DE.js
        for German. The desired localization file should be along with the jqxcalendar.js.
        The localization is set to all jqxCalendar instances by setting the jqxCalendar's
        culture property. </title>
 <meta name="description" content="AngularJS Calendar example. This example demonstrates how to customize the calendar's first day of week." /> 
    <link rel="stylesheet" href="../../../jqwidgets/styles/jqx.base.css" type="text/css" />
         <script type="text/javascript" src="../../../scripts/jquery-1.11.1.min.js"></script><script type="text/javascript" src="../../../scripts/angular.min.js"></script>
    <script type="text/javascript" src="../../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../../scripts/demos.js"></script>
    <script type="text/javascript" src="../../../jqwidgets/jqxdatetimeinput.js"></script>
    <script type="text/javascript" src="../../../jqwidgets/jqxcalendar.js"></script>
    <script type="text/javascript" src="../../../jqwidgets/jqxtooltip.js"></script>
    <script type="text/javascript" src="../../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../../jqwidgets/globalization/globalize.js"></script><script type="text/javascript" src="../../../jqwidgets/jqxangular.js"></script>
    <script type="text/javascript">
        var demoApp = angular.module("demoApp", ["jqwidgets"]);
        demoApp.controller("demoController", function ($scope) {
            // define available cultures
            var days = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];

            // create a calendar.
            $scope.calendarSettings = { firstDayOfWeek: 0, width: '220px', height: '220px', enableTooltips: false };

            $scope.dropDownListSettings = { source: days, selectedIndex: 6, width: '200px', autoDropDownHeight: true, height: '25px' };
            $scope.dropDownListSelect = function (event) {
                var index = event.args.index;
                if (index == 6) {
                    index = -1;
                }
                $scope.calendarSettings.firstDayOfWeek = index + 1;
            };
        });
    </script>
</head>
<body ng-controller="demoController">

    <div style='float: left; width: 250px;' id='jqxWidget'>
        <jqx-calendar jqx-watch="[calendarSettings.firstDayOfWeek, calendarSettings.width]" jqx-settings="calendarSettings">
            </jqx-calendar>
        <br />
        <div>
            <br />
            <div style='float: left; font-family: "Verdana", "sans-serif"; font-size: 13px;'>
                Choose the first day of the week
            </div>
            <br />
            <br />
            <jqx-drop-down-list jqx-on-select="dropDownListSelect(event)" jqx-settings="dropDownListSettings" style='float: left;'>
            </jqx-drop-down-list>
        </div>
    </div>

</body>
</html>
